<template>
  <div class="holy-grail-layout">
    <!-- 顶部导航栏 -->
    <Header/>
    <!-- 主体部分 -->
    <div class="main-container">
      <!-- 左侧边栏 -->
      <Left/>
      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 面包屑导航 -->
        <div class="breadcrumb">
          <i class="icon-home"></i>
          <span v-for="(item, index) in themeStore.breadcrumbs" :key="index">
            <span class="separator">/</span>
            <span class="crumb">{{ item.title }}</span>
          </span>
        </div>
        <!-- 内容区域 -->
        <div class="content-area">
          <router-view/>
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import {computed, ref} from 'vue';
import Left from '@/layout/Left.vue';
import Header from '@/layout/Header.vue';
import {useThemeStore} from "@/stores/themeStore.js";

const themeStore = useThemeStore();

</script>

<style scoped>
/* 基础样式 */
.holy-grail-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  font-family: 'Arial', sans-serif;
  color: #333;
}


/* 主体部分 */
.main-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.menu-item i {
  font-size: 16px;
  margin-right: 10px;
}

.menu-text {
  flex: 1;
}

.menu-badge {
  background-color: #f56c6c;
  color: white;
  border-radius: 10px;
  font-size: 12px;
  padding: 0 5px;
}

.menu-divider {
  height: 1px;
  background-color: #404a58;
  margin: 10px 0;
}

/* 主内容区 */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 15px;
  background-color: #f5f7fa;
}

.breadcrumb {
  margin-bottom: 20px;
  font-size: 14px;
  color: #999;
}

.breadcrumb i {
  margin-right: 5px;
}

.separator {
  margin: 0 5px;
}

.crumb:last-child {
  color: #333;
  font-weight: bold;
}

.content-area {
  background-color: white;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 右侧边栏 */
.right-sidebar {
  width: 240px;
  background-color: white;
  border-left: 1px solid #e6e6e6;
  overflow-y: auto;
  padding: 15px;
}

.sidebar-title {
  font-size: 14px;
  color: #999;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.quick-action {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background-color: #f5f7fa;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-action:hover {
  background-color: #e6f7ff;
  color: #2d8cf0;
}

.quick-action i {
  margin-right: 8px;
}

.recent-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.recent-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
}

.recent-item i {
  margin-right: 8px;
  color: #999;
}

.recent-item:hover {
  color: #2d8cf0;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .right-sidebar {
    display: none;
  }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 60px;
    bottom: 0;
    z-index: 99;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }

  .sidebar.collapsed {
    transform: translateX(0);
    width: 220px;
  }

  .main-content {
    margin-left: 0;
  }
}
</style>